<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        {{movie}}
        <navbar-123></navbar-123>
        <button @click="handleLeft">往左</button>
    </div>
</body>
<script>
    // 定义一个全局组件
    Vue.component('navbar-123', {
        template: `
        <div style="background-color: skyblue;border:5px solid yellowgreen">
                    <button @click="handleLeft">left</button>
                    猫眼电影--{{movie}}
                    <button @click="handleRight">right</button>
                </div>
        `,
        data() {
            return {
                movie: "小李飞刀"
            }
        },
        methods: {
            handleLeft() {
                console.log('left');
            },
            handleRight() {
                console.log('right');
            }
        },
    })
    let vm = new Vue({
        el: '#app',
        data: {
            movie: '教父',
        },
        methods: {
            handleLeft() {
                console.log('left----');
            },
        },
    })

    /*
        组件：将 js/h5/css 组成的轮播图，打包(封装)成 <swiper>
            1. 命名：js 驼峰，h5 使用连接符 -
            2. template 片段，没有代码提示和高亮 (vue 单文件组件解决)
            3. css 只能写行内样式。(vue 单文件组件解决)
            4. template 只能包含一个根节点
            5. 组件之间是独立，无法直接访问另一个组件的状态或方法。间接的组件通信
            6. 自定义组件 data 必须是一个函数
            7. 组件太乱。(vue 单文件组件解决)
    */
</script>

</html>